<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-operation" *ngIf="!isDetail">
    <lv-group>
        <lv-group lvGutter="8px">
            <button lv-button (click)="allSelect(true)" [disabled]="!tableData?.length">
                {{buttonLabel}}
            </button>
        </lv-group>
        <lv-group></lv-group>
    </lv-group>
</div>

<div class="list-container">
    <lv-datatable [lvData]="tableData" (lvSortChange)="sortChange($event)" [lvPaginator]="page"
        lvSelectionMode='multiple' [lvSelection]='selection' (lvSelectionChange)="selectionChange($event)"
        lvCompareWith="uuid" [lvScroll]="{ x: '100%' }" lvSort #lvTable lvAsync lvResize>
        <thead>
            <tr>
                <th lvShowCheckbox width='64px' [lvRowsData]='lvTable.renderData' *ngIf="!isDetail"
                    [lvDisabled]="isAllSelect">
                </th>
                <ng-container *ngFor="let col of columns">
                    <th *ngIf="col.isShow" [lvShowFilter]="col.filter" (lvFilterChange)="filterChange($event)"
                        [(lvFilters)]="col.filterMap" lvCellKey="{{ col.key }}" lvShowCustom lvFilterCheckAll
                        [lvShowSort]="col.isSort" [attr.width]="col.width">
                        <span lv-overflow>{{ col.label}}</span>
                        <div lvCustom *ngIf="col.key === 'uuid'">
                            <i lv-icon="lv-icon-search" [lvColorState]="true" [ngClass]="{ active: !!queryUuid }"
                                lv-popover [lvPopoverContent]="uuidFilterTpl" lvPopoverPosition="bottom"
                                lvPopoverTrigger="click" #uuidPopover="lvPopover"></i>
                        </div>
                        <div lvCustom *ngIf="col.key === 'name'">
                            <i lv-icon="lv-icon-search" [lvColorState]="true" [ngClass]="{ active: !!queryName }"
                                lv-popover [lvPopoverContent]="nameFilterTpl" lvPopoverPosition="bottom"
                                lvPopoverTrigger="click" #namePopover="lvPopover"></i>
                        </div>
                        <div lvCustom *ngIf="col.key === 'version'">
                            <i lv-icon="lv-icon-search" [lvColorState]="true" [ngClass]="{ active: !!queryVersion }"
                                lv-popover [lvPopoverContent]="versionFilterTpl" lvPopoverPosition="bottom"
                                lvPopoverTrigger="click" #versionPopover="lvPopover"></i>
                        </div>
                        <div lvCustom *ngIf="col.key === 'endpoint'">
                            <i lv-icon="lv-icon-search" [lvColorState]="true" [ngClass]="{ active: !!queryIp }"
                                lv-popover [lvPopoverContent]="ipFilterTpl" lvPopoverPosition="bottom"
                                lvPopoverTrigger="click" #ipPopover="lvPopover"></i>
                        </div>
                        <div lvCustom *ngIf="col.key === 'sla_name'">
                            <i lv-icon="lv-icon-search" [lvColorState]="true" [ngClass]="{ active: !!querySlaName }"
                                lv-popover [lvPopoverContent]="slaNameFilterTpl" lvPopoverPosition="bottom"
                                lvPopoverTrigger="click" #slaNamePopover="lvPopover"></i>
                        </div>
                        <div lvCustom *ngIf="col.key === 'sla_compliance'" class="resource-sla-help">
                            <aui-sla-compliance-tooltip margin="true"></aui-sla-compliance-tooltip>
                        </div>
                        <div lvCustom *ngIf="col.key === 'memo'">
                            <i lv-icon="lv-icon-search" [lvColorState]="true" [ngClass]="{ active: !!queryRemark }"
                                lv-popover [lvPopoverContent]="remarkFilterTpl" lvPopoverPosition="bottom"
                                lvPopoverTrigger="click" #remarkPopover="lvPopover"></i>
                        </div>
                    </th>
                </ng-container>
                <th width='34px' #colPopover='lvPopover' lv-popover lvPopoverPosition='bottomRight'
                    [lvPopoverContent]='colSelectTp' lvPopoverTheme='light' lvPopoverTrigger='click'>
                    <i lv-icon='aui-icon-hide'>
                    </i>
                </th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let item of lvTable.renderData;trackBy:trackByUuid">
                <tr>
                    <td width='64px' lvShowCheckbox [lvRowData]='item' *ngIf="!isDetail" [lvDisabled]="item.disabled">
                    </td>
                    <ng-container *ngFor="let col of columns">
                        <ng-container *ngIf="col.isShow">
                            <td>
                                <ng-container [ngSwitch]="col.key">
                                    <ng-container *ngSwitchCase="'name'">
                                        <span lv-overflow>{{ item.name }}</span>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'link_status'">
                                        <div class="link_status">
                                            <aui-status [value]="item.link_status" type="resource_Host_LinkStatus">
                                            </aui-status>
                                            <ng-container *ngIf="isMulti">
                                                <span class="view-detail"
                                                    *ngIf="item.link_status==1 || item.link_status==0"
                                                    (click)="getStatusDetail(item)">
                                                    {{'common_view_label' | i18n}}
                                                </span>
                                            </ng-container>
                                        </div>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'cpuRate'">
                                        {{ item.link_status === 1 && (item.protectedAgentExtend?.cpuRate ||
                                        item.protectedAgentExtend?.cpuRate === 0) ?
                                        NumberToFixed(item.protectedAgentExtend?.cpuRate, 1) + '%' : '--'}}
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'memRate'">
                                        {{item.link_status === 1 && (item.protectedAgentExtend?.memRate ||
                                        item.protectedAgentExtend?.memRate === 0) ?
                                        NumberToFixed(item.protectedAgentExtend?.memRate, 1) + '%' : '--'}}
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'os_type'">
                                        {{ item.os_type | textMap: 'Os_Type' | nil}}
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'sub_type'">
                                        <span lv-overflow>{{ item.sub_type | textMap: 'Host_Proxy_Type' | nil}}</span>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'version'">
                                        <lv-group lvGutter="6px">
                                            <span lv-overflow>{{ item.version | nil}}</span>
                                            <span
                                                *ngIf="item.extendInfo?.agentUpgradeable === '1' && 1 === item.link_status">
                                                <i lv-icon="aui-icon-version-update" [lvColorState]="true"
                                                    class='version-update'
                                                    [lv-tooltip]="'protection_host_upgradeable_label'|i18n"></i>
                                            </span>
                                        </lv-group>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'sla_name'">
                                        <ng-container *ngIf="item.sla_id; else emptyTpl">
                                            <span class="aui-link" id='outerClosable' (click)="getSlaDetail(item)"
                                                lv-overflow>
                                                <sla-type [name]="item.sla_name"></sla-type>
                                            </span>
                                        </ng-container>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'sla_status'">
                                        <aui-status [value]="item.sla_status" type="Sla_Status">
                                        </aui-status>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'protection_status'">
                                        <aui-status [value]="item.protection_status" type="Protection_Status">
                                        </aui-status>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'sla_compliance'">
                                        <aui-status [value]="item.sla_compliance" type="Sla_Compliance">
                                        </aui-status>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'trustworthiness'">
                                        <ng-container *ngIf="hostTrustOpen">
                                            <aui-status [value]="item.trustworthiness" type="hostTrustworthinessStatus">
                                            </aui-status>
                                        </ng-container>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'src_deduption'">
                                        <span lv-overflow>
                                            {{ (item.extendInfo?.src_deduption === 'true' ? 'common_yes_label' :
                                            'common_no_label') | i18n}}
                                        </span>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'log_level'">
                                        <span lv-overflow>
                                            {{item.extendInfo?.logLeve?(item.extendInfo?.logLeve | textMap:
                                            'Log_Level') : 'common_info_label'|i18n}}
                                        </span>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'lan_free'">
                                        <span lv-overflow>
                                            {{(item.extendInfo?.isAddLanFree === '1' ?
                                            'protection_configured_status_label'
                                            : 'protection_not_configured_status_label') | i18n}}
                                        </span>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'install_path'">
                                        <span lv-overflow>{{item.extendInfo?.install_path | nil}}</span>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'isShared'">
                                        <span lv-overflow>
                                            {{(item.protectedAgentExtend?.isShared ?
                                            'switch_status_on_label' : 'switch_status_off_label') | i18n}}
                                        </span>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'memo'">
                                        <span lv-overflow>
                                            {{item.extendInfo?.tag | nil}}
                                        </span>
                                    </ng-container>
                                    <ng-container *ngSwitchCase="'endpoint'">
                                        <ng-container
                                            *ngIf="item.extendInfo?.subNetFixedIp && item.extendInfo?.subNetFixedIp !== item.endpoint; else elseIpTemplate">
                                            <span lv-overflow>{{item.endpoint | nil}}({{item.extendInfo?.subNetFixedIp
                                                |nil}})</span>
                                        </ng-container>
                                        <ng-template #elseIpTemplate>
                                            <span lv-overflow>{{item.endpoint | nil}}</span>
                                        </ng-template>
                                    </ng-container>
                                    <ng-container *ngSwitchDefault>
                                        <span lv-overflow>{{item[col.key] | nil}}</span>
                                    </ng-container>
                                </ng-container>
                            </td>
                        </ng-container>
                    </ng-container>
                    <td width='34px'></td>
                </tr>
            </ng-container>
        </tbody>
    </lv-datatable>
</div>
<div class="aui-paginator-wrap">
    <lv-paginator #page [lvPageSizeOptions]="sizeOptions" [lvPageSize]="pageSize" [lvTotal]="total"
        [lvPageIndex]="pageIndex" (lvPageChange)="pageChange($event)" [hidden]="!lvTable.renderData.length">
    </lv-paginator>
</div>

<ng-template #uuidFilterTpl>
    <lv-search [(ngModel)]="queryUuid" (lvSearch)="searchByUuid($event)" [lvFocus]="true"></lv-search>
</ng-template>

<ng-template #nameFilterTpl>
    <lv-search [(ngModel)]="queryName" (lvSearch)="searchByName($event)" [lvFocus]="true"></lv-search>
</ng-template>

<ng-template #remarkFilterTpl>
    <lv-search [(ngModel)]="queryRemark" (lvSearch)="searchByRemark($event)" [lvFocus]="true"></lv-search>
</ng-template>

<ng-template #versionFilterTpl>
    <lv-search [(ngModel)]="queryVersion" (lvSearch)="searchByVersion($event)" [lvFocus]="true"></lv-search>
</ng-template>

<ng-template #ipFilterTpl>
    <lv-search [(ngModel)]="queryIp" (lvSearch)="searchByIp($event)" [lvFocus]="true"></lv-search>
</ng-template>

<ng-template #slaNameFilterTpl>
    <lv-search [(ngModel)]="querySlaName" (lvSearch)="searchBySlaName($event)" [lvFocus]="true"></lv-search>
</ng-template>

<ng-template #emptyTpl>
    --
</ng-template>

<ng-template #colSelectTp>
    <column-filter-tpl [tableKey]="tableColumnKey" [columns]="columns"></column-filter-tpl>
</ng-template>

<ng-template #contentTpl>
    <div class="aui-text-help-sm gutter-column">
        {{'common_export_log_tip_label'| i18n}}
    </div>
    <lv-form [formGroup]="formGroup" class="aui-gutter-column-xxl">
        <lv-form-item>
            <lv-form-label>
                {{ 'common_package_name_label' | i18n }}
            </lv-form-label>
            <lv-form-control [lvErrorTip]='nameErrorTip'>
                <input lv-input formControlName='fileName' />
            </lv-form-control>
        </lv-form-item>
    </lv-form>
</ng-template>
